<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>
    <title>管理员后台</title>
    <link rel="stylesheet" th:href="@{/css/style2.css}" type="text/css" media="all"/>
    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script type="text/javascript" th:src="@{/js/bootstrap.bundle.js}"></script>
    <!--    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>-->
    <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
    <style>
        .avatar-container {
            position: relative;
            width: 100px; /* 设置你需要的宽度 */
            height: 100px; /* 设置你需要的高度 */
            border-radius: 50%; /* 可选，如果你想要圆形的头像 */
            overflow: hidden; /* 确保超出容器的部分被隐藏 */
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #201d1d; /* 设置背景色，可选 */
        }

        .avatar {
            width: 100%;
            height: 100%;
            object-fit: cover; /* 保持图片的纵横比 */
            display: block; /* 确保图片始终显示 */
        }

        .avatar-fallback {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none; /* 初始时隐藏文本 */
            color: #fff; /* 设置文本颜色 */
            background-color: rgba(99, 97, 97, 0.5); /* 设置背景色，覆盖在图片上 */
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 100px;
            text-align: center;
            font-size: 16px; /* 设置字体大小 */
        }

        .navbar-nav .nav-link.active {
            background-image: linear-gradient(to right, #434343 0%, #585656 100%);
            color: #f4eaea; /* 文本颜色通常为白色以与深色背景形成对比 */
        }
    </style>
</head>
<body>
<!-- Header -->
<div id="header">
    <div class="shell">
        <!-- Logo + Top Nav -->
        <div id="top">
            <h1><a href="#">Echo Blog后台</a></h1>
            <div id="top-navigation">
                欢迎 <a href="#"><strong>管理员</strong></a>
                <span>|</span>
                <a href="#">帮助</a>
                <span>|</span>
                <a href="#">设置</a>
                <span>|</span>
                <a th:href="@{/system/showMain}">返回用户界面</a>
            </div>
        </div>
        <!-- End Logo + Top Nav -->

        <!-- 导航 -->
        <div id="navigation">
            <ul>
                <li><a th:href="@{/system/books?currentPage=1}" class="active"><span>博客管理</span></a></li>
                <li><a th:href="@{/system/users?currentPage=1}" class="active"><span>用户管理</span></a></li>
            </ul>
        </div>
        <!-- End Main Nav -->
    </div>
</div>
<!-- End Header -->

<!-- Container -->
<div id="container">
    <div class="shell">
        <br/>
        <!-- Main -->
        <div id="main">
            <div class="cl">&nbsp;</div>

            <!-- Content -->
            <div id="content">
                <!-- 管理文章  -->
                <div class="box" th:if="${m}==0">
                    <!-- Box Head -->
                    <div class="box-head">
                        <h2 class="left">审核文章</h2>
                        <div class="right">
                            <label>搜索文章</label>
                            <input id="key" type="text" class="field small-field"/>
                            <input id="search" type="submit" class="button" value="search"/>
                        </div>
                    </div>
                    <!-- End Box Head -->

                    <!-- 实现分页查询文章 -->
                    <div class="table">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <thead>
                            <tr>
                                <!--                                <th width="13"><input type="checkbox" class="checkbox"/></th>-->
                                <th>标题</th>
                                <th>时间</th>
                                <th>作者</th>
                                <th>文章状态</th>
                                <!-- 待审核、已审核、未通过-->
                                <th class="ac">操作</th>
                            </tr>
                            </thead>
                            <tbody id="book-tbody">
                            <tr th:each="bk:${allBooks}" id="book-tr">
                                <!--                                <td><input type="checkbox" class="checkbox"/></td>-->
                                <td><a th:href="|@{/system/showDetail?title=}${bk.title}&phone=${bk.phone}|"
                                       th:text="${bk.title}"></a></td>
                                <td th:text="${bk.createdate}"></td>
                                <td th:text="${bk.phone}"></td>
                                <td th:if="${bk.status}==1">已审核</td>
                                <td th:if="${bk.status}==0" style="color: darkred">待审核</td>
                                <td th:if="${bk.status}==1 and ${bk.put}==0"><a
                                        th:href="|@{/system/putText?phone=}${bk.phone}&title=${bk.title}&t=${current}&put=1|"
                                        class="ico edit">推送</a></td>
                                <td th:if="${bk.status}==1 and ${bk.put}==1"><a
                                        th:href="|@{/system/putText?phone=}${bk.phone}&title=${bk.title}&t=${current}&put=0|"
                                        class="ico edit">撤下推送</a></td>
                                <td th:if="${bk.status}==0">
                                    <a th:href="|@{/system/check?choice=1&phone=}${bk.phone}&t=${current}&title=${bk.title}|"
                                       class="ico del">通过</a>
                                    <a th:href="|@{/system/check?choice=-1&phone=}${bk.phone}&t=${current}&title=${bk.title}|"
                                       class="ico del">不通过</a>
                                </td>
                            </tr>
                            </tbody>
                            <!-- 页码 -->
                            <tr>
                                <td colspan="5" align="right" id="book-ye">
                                    <ul th:if="${current} !=0 " class="pagination">
                                        <li><a>第<span id="counts" th:text="${current}"></span>页</a></li>
                                        <li><a>共<span th:text="${booksTotal}"></span>页</a></li>
                                        <li>
											<span th:if="${current} != 1">

												<a th:href="|@{/system/books?currentPage=}${current}&se=0|">上一页</a>
                                                <!--												<button id="last">上一页</button>-->
											</span>
                                            <span th:if="${current} != ${booksTotal}">
												<a th:href="|@{/system/books?currentPage=}${current}&se=1|">下一页</a>
                                                <!--                                                <button id="next">下一页</button>-->


											</span>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <!-- Table -->
                </div>
                <!-- End Box -->

                <!-- 管理用户 分页 -->
                <div class="box" th:if="${m} ==1">
                    <!-- Box Head -->
                    <div class="box-head">
                        <h2 class="left">管理用户</h2>
                        <div class="right">
                            <label>搜索用户</label>
                            <input id="ke" type="text" class="field small-field"/>
                            <input id="se" type="submit" class="button" value="search"/>
                        </div>
                    </div>
                    <!-- End Box Head -->

                    <!-- 实现分页查询用户 -->
                    <div class="table">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                            <thead>
                            <tr>
                                <th>用户名</th>
                                <th>电话</th>
                                <th width="110" class="ac">操作</th>
                            </tr>
                            </thead>

                            <tbody id="user-tbody">
                            <tr th:each="ao:${allOrders}" id="user-tr">
                                <td><a th:href="|@{/content/intoOther?phone=}${ao.phone}|"
                                       th:text="${ao.userName}"></a></td>
                                <td th:text="${ao.phone}"></td>
                                <td th:if="${ao.put}==1" style="color: darkred"><a
                                        th:href="|@{/system/putUser?phone=}${ao.phone}&put=0&t=${currentPage}|"
                                        class="ico edit">撤下推送</a></td>
                                <td th:if="${ao.put}==0"><a
                                        th:href="|@{/system/putUser?phone=}${ao.phone}&put=1&t=${currentPage}|"
                                        class="ico edit">推送</a></td>
                            </tr>
                            <tr>
                                <td colspan="5" align="right">
                                    <ul class="pagination" id="user-ye">
                                        <li><a>第<span id="number" th:text="${currentPage}"></span>页</a></li>
                                        <li><a>共<span th:text="${totalPage}"></span>页</a></li>
                                        <li>
											<span th:if="${currentPage} != 1">

												<a th:href="|@{/system/users?currentPage=}${currentPage}&se=0|">上一页</a>
                                                <!--												<button id="last">上一页</button>-->
											</span>
                                            <span th:if="${currentPage} != ${totalPage}">
												<a th:href="|@{/system/users?currentPage=}${currentPage}&se=1|">下一页</a>
                                                <!--                                                <button id="next">下一页</button>-->
											</span>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
                <!-- End Content -->

            </div>
            <!-- Sidebar -->
            <div id="sidebar">

                <!-- Box -->
                <div class="box">
                    <!-- Box Head -->
                    <div class="box-head">
                        <h2>发布</h2>
                    </div>
                    <div class="avatar-container" id="pic">
                        <img th:src="@{/images/girl.jpg}"
                             class="avatar d-inline-block align-text-top"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"/>
<!--                        <div class="avatar-fallback ">点击</div>-->
                    </div>
                    <!-- End Box Head-->

                    <div class="box-content">
                        <a href="#" class="add-button"><span>Add new Article</span></a>
                        <div class="cl">&nbsp;</div>
                    </div>
                </div>
            </div>
            <!-- End Sidebar -->
            <div class="cl">&nbsp;</div>
        </div>
    </div>
</div>
<!-- End Container -->

<!-- Footer-->
<div id="footer">
    <div class="shell">
        <span class="left">&copy; 2024 - Echo BLog</span>
        <span class="right">
			<a target="_blank" href="#" title="重庆师范大学">计算机学院</a>
		</span>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        <!--搜索文章-->
        $('#search').click(function () {
            var searchText = $('#key').val();

            if (searchText !== '') { // 如果搜索文本不为空
                $.ajax({
                    url: '/system/searchText', // 后端处理搜索请求的URL
                    type: 'GET',
                    data: {
                        search: searchText,
                        t: 1
                    }, // 发送的数据
                    dataType: 'json', // 告诉jQuery我们期望接收JSON数据
                    success: function (data) {
                        // 假设data是一个JSON数组，每个元素都是一个SearchResult对象
                        var html = '';
                        let total = data.myNumber;
                        var ye = '';
                        if (data.myList.length > 0) {
                            console.log("进入");
                            let list = data.myList;

                            $.each(list, function (index, result) {
                                // 构建HTML字符串来显示结果
                                // let date = new Date(result.createdate);
                                // 构建HTML字符串来显示结果
                                let tit = result.title;
                                let phone = result.phone;
                                let createdate = result.createdate;
                                let sta = '';
                                let p = '';
                                if (result.status == 1) {
                                    sta = ' <td>已审核</td>';
                                } else {
                                    sta = '<td style="color: darkred">待审核</td>';
                                    p = '<td><a href="/system/check?choice=1&phone=' + phone + '&t=1&title=' + tit + '"' +
                                        'className="ico del">通过</a>' +
                                        '<a href="/system/check?choice=-1&phone=' + phone + '&t=1&title=' + tit + '"' +
                                        'className="ico del">不通过</a></td>';
                                }
                                if (result.put == 0 && result.status == 1) {
                                    p = '<td><a href="/system/putText?phone=' + phone + '&title=' + tit + '&t=1&put=1"' +
                                        'className="ico edit">推送</a></td>';
                                } else if (result.put == 1 && result.status == 1) {
                                    p = '<td><a href="/system/putText?phone=' + phone + '&title=' + tit + '&t=1&put=0"' +
                                        'className="ico edit">撤下推送</a></td>';
                                }
                                html += '<tr><td><a href="/system/showDetail?title=' + tit + '&phone=' + phone + '">' +
                                    tit + '</a></td>' +
                                    '<td>' + createdate + '</td>' +
                                    '<td>' + phone + '</td>' +
                                    sta + p + '</tr>';
                            });

                            $('#book-tbody').html(html).show(); // 显示结果容器并填充数据
                            $('#book-ye').html(ye).show(); // 显示结果容器并填充数据
                        } else {
                            console.log("空的");

                            $('#book-tbody').html(html).show(); // 显示结果容器并填充数据
                            $('#book-ye').html(ye).show(); // 显示结果容器并填充数据
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("AJAX请求失败:", status, error);
                        $('#book-tbody').hide().empty(); // 请求失败时隐藏并清空容器
                    }
                })
            }
        })

        // 搜索用户
        $('#se').click(function () {
            var Text = $('#ke').val();

            if (Text !== '') { // 如果搜索文本不为空
                $.ajax({
                    url: '/system/searchUsers', // 后端处理搜索请求的URL
                    type: 'GET',
                    data: {
                        search: Text,
                        t: 1
                    }, // 发送的数据
                    dataType: 'json', // 告诉jQuery我们期望接收JSON数据
                    success: function (data) {
                        // 假设data是一个JSON数组，每个元素都是一个SearchResult对象
                        var html = '';
                        let total = data.myNumber;
                        var ye = '';
                        if (data.myList.length > 0) {
                            console.log("进入");
                            let list = data.myList;

                            $.each(list, function (index, result) {
                                // 构建HTML字符串来显示结果
                                // let date = new Date(result.createdate);
                                // 构建HTML字符串来显示结果
                                let name = result.userName;
                                let phone = result.phone;
                                let put = '';
                                let td = '';
                                if (result.put == 0) {
                                    td = '<td style="color: darkred"><a href="/system/putUser?phone=' + phone + '&put=1&t=1"' +
                                        ' class="ico edit">推送</a></td>';

                                } else {
                                    td = ' <td><a href="/system/putUser?phone=' + phone + '&put=0&t=1"' +
                                        '  class="ico edit">撤下推送</a></td>'
                                }
                                html += '<tr><td><a href="/content/intoOther?phone='
                                    + phone + '">' + name + '</a></td>' + '<td>' + phone + '</td>' + td + '</tr>'
                            });

                            $('#user-tbody').html(html).show(); // 显示结果容器并填充数据
                            $('#user-ye').html(ye).show(); // 显示结果容器并填充数据
                        } else {
                            console.log("空的");

                            $('#user-tbody').html(html).show(); // 显示结果容器并填充数据
                            $('#user-ye').html(ye).show(); // 显示结果容器并填充数据
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("AJAX请求失败:", status, error);
                        $('#user-tbody').hide().empty(); // 请求失败时隐藏并清空容器
                    }
                })
            }
        })
    })

</script>
</body>
</html>